<template>

  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-bind:to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>xxx</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="dict-main">
      <el-tabs v-model="activeName"   class="title-top">
        <el-tab-pane   label="标题" name="first">
          <div class="main-module">
            <div class="btn-module">
              <el-button size="mini"   type="primary" icon="el-icon-delete">按钮1</el-button>
              <el-button size="mini"   type="success" icon="el-icon-download">按钮2</el-button>
              <el-button size="mini"   type="info" icon="el-icon-download">按钮3</el-button>
              <el-button size="mini"   type="warning" icon="el-icon-download">按钮4</el-button>
              <el-button size="mini"   type="danger" icon="el-icon-download">按钮5</el-button>
            </div>

            <!--搜索-->
            <div class="clear">
              <el-input size="small" class="search-module fr" placeholder="请输入内容">
                <el-button slot="append" icon="el-icon-search" type="primary"></el-button>
              </el-input>
            </div>
            <!--表格-->
            <template>
              <el-table  :data="billData" tooltip-effect="dark" style="width: 100%">
                <el-table-column label="订单号"  prop=""></el-table-column>
                <el-table-column label="卡号"  prop=""></el-table-column>
                <el-table-column label="用户类型"  prop=""></el-table-column>
                <el-table-column label="用户名"  prop=""></el-table-column>
                <el-table-column label="主服务"  prop=""></el-table-column>
                <el-table-column label="子服务" prop=""></el-table-column>
                <el-table-column label="站点编号"  prop=""></el-table-column>
                <el-table-column label="站点名称"  prop=""></el-table-column>
                <el-table-column label="充电桩编号"  prop=""></el-table-column>
                <el-table-column label="订单状态"  prop=""></el-table-column>
                <el-table-column label="订单时间" prop=""></el-table-column>
                <el-table-column label="总价" prop=""></el-table-column>
                <el-table-column label="购买数量" prop=""></el-table-column>
              </el-table>
            </template>
            <!--分页-->
            <div class="block text-center">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageable.currentPage" :page-sizes="[20, 40, 80, 100]" :page-size="pageable.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageable.total"></el-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>


    </div>

  </div>
</template>
<script>
import { interflowList } from '@/api/interflow';

export default {
  data () {
    return {
      pageable: {
        currentPage: 1,
        pageSize: 20
      },
      activeName: 'first',
      index: 1,
      billData: []
    };
  },
  methods: {
    //获取数据
    interflwolist () {
      interflowList(this.pageable.currentPage, this.pageable.pageSize).then(
        response => {
          if (response.code !== 0) {
            this.$message({
              message: response.message,
              type: 'error'
            });
          } else {
            this.interflowData = response.data.data;
            console.log(response);
            this.pageable = {
              page: response.data.pageInfo.page,
              pageSize: response.data.pageInfo.pageSize,
              total: response.data.pageInfo.total
            };
          }
        }
      );
    },

    //分页
    handleSizeChange (val) {
      this.pageable.pageSize = val;
      this.interflwolist();
    },
    handleCurrentChange (val) {
      this.pageable.currentPage = val;
      this.interflwolist();
    }
  }
};
</script>


